<template>
  <div class="menu">
    <GoBackNav />
    <div class="menu-list"  v-for="item of tags" @click="tiao(item.id)" :key="item.id">
      <img :src="item.albums" alt />
      <div class="box">
        <p>{{item.title}}</p>
        <p>{{item.tags}}</p>
      </div>
    </div>
  </div>
</template>


<script>
import GoBackNav from "../components/nav/nav.vue";
export default {
  props: {
    keyword: { type: String }
  },
  data() {
    return {
      arr: [],
      tags: []
    };
  },
  components: {
    GoBackNav
  },

  mounted() {
    axios({
      url: "/json/cell.json"
    }).then(
      res => res.data.reason === "Success" && (this.arr = res.data.result.data)
    ),
      this.getdata();
  },
  updated() {},
  methods: {
    tiao(id) {
      this.$router.replace('/detail/'+id)
      console.log(id)
    },
    getdata() {
      axios({
        url: "/json/cell.json",
        headers: {}
      }).then(res => {
        this.arr = res.data.result.data;
        this.tags = [];
        this.arr.forEach(item => {
          if (
            item.tags.indexOf(this.keyword) > -1 ||
            item.title.indexOf(this.keyword) > -1
          ) {
            this.tags.push(item);
            console.log(this.tags);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.menu {
  margin-top: 2.1875rem;
}
.menu-list {
  display: flex;
  align-items: center;
  margin-top: 0.625rem;
}
img {
  width: 5.25rem;
  height: 5.25rem;
  margin-left: 0.9375rem;
  border-radius: 0.625rem;
}
p {
  margin-left: 0.625rem;
  text-overflow: ellipsis;
  margin-top: 0.625rem;
}
p:nth-child(1) {
  font-weight: bold;
  font-size: 0.875rem;
  color: gray;
}
</style>